<template>
  <div class="header" @click="showDetail">
    <div class="content-wrapper">
      <!-- 商家头像 -->
      <div class="avatar">
        <img :src="seller.avatar" width="64" height="64" />
      </div>
      <!-- 商家信息 -->
      <div class="content">
        <!-- 商家品牌及名称-->
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{ seller.name }}</span>
        </div>
        <!-- 商家介绍及配送时间 -->
        <div class="description">
          {{ seller.description }} / {{ seller.deliveryTime }}分钟送达
        </div>
        <!-- 商家活动 -->
        <!-- 活动内容的显示，取决于是否有活动 -->
        <div class="support" v-if="seller.supports">
          <!-- 活动图标组件 -->
          <support-ico
            class="support"
            :type="seller.supports[0].type"
            :size="2"
          ></support-ico>
          <!-- 活动文字 -->
          <span class="text">{{ seller.supports[0].description }}</span>

          <!-- 活动数量 -->
          <div class="support-count">
            <span class="count">{{ seller.supports.length }}个</span>
            <i class="icon-keyboard_arrow_right"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 商家公告 -->
    <div class="bulletin-wrapper">
      <!-- 公告图标 -->
      <span class="bulletin-title"></span>
      <!-- 公告内容 -->
      <span class="bulletin-text">{{ seller.bulletin }}</span>
      <!-- 箭头 -->
      <i class="icon-keyboard_arrow_right"></i>
    </div>
  </div>
</template>

<script>
import SupportIco from "components/support-ico/support-ico";
export default {
  name: "v-header",
  props: {
    // 使用这个模式，可以指定预期数据的数据类型及默认值，避免初始加载数据时，未获取到数据报错
    seller: {
      type: Object, // 数据类型
      default() {
        // 设置默认值
        return {};
      }
    }
  },
  components: {
    SupportIco
  },
  methods: {
    showDetail() {
      // 返回的是组件实例
      // this.$createHeaderDetail  采用驼峰命名的方式创建 api  创建后 获得的是组件实例
      this.headerDetailComp =
        this.headerDetailComp ||
        this.$createHeaderDetail({
          $props: {
            seller: "seller"
          }
        });
      // 调用组件实例的方法
      this.headerDetailComp.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin'
@import "~common/stylus/variable"

.header
  position: relative
  overflow: hidden
  color: $color-white
  background-color: $color-bg-ss
  .content-wrapper
    position: relative
    display: flex
    align-items: center
    padding: 24px 12px 18px 24px
    // 头像
    .avatar
      flex: 0 0 64px
      width: 64px
      margin-right: 16px
      img
        border-radius: 2px
        width: 100%
        height: 100%
    .content
      flex: 1
      // 商家图标名称
      .title
        display: flex
        align-items: center
        margin-bottom 8px
        // 图标
        .brand
          width: 30px
          height: 18px
          bg-image('images/brand')
          background-size 30px 18px
          background-repeat no-repeat
          // 名称
        .name
          margin-left 6px
          font-size $fontsize-large
          font-weight bold
      // 商家描述
      .description
        margin-bottom 8px
        line-height 12px
        font-size $fontsize-small
      // 活动
      .support
        position relative
        display flex
        align-items center
        // transform scale(0.8)
        // 活动图标
        .support-ico
          margin-right 4px
        // 活动文字
        .text
          line-height 12px
          font-size $fontsize-mini

        // 活动数量 此处使用定位
        .support-count
          position absolute
          right 12px
          display flex
          align-items center
          padding 0 8px
          height 24px
          line-height 24px
          text-align center
          border-radius 14px
          background-color $color-bg-sss
          // 数量
          .count
            font-size $fontsize-mini
          // 箭头
          .icon-keyboard_arrow_right
            margin-left 2px
            line-height 24px
            font-size $fontsize-mini

  // 公告
  .bulletin-wrapper
    position relative
    display flex
    align-items center
    height 28px
    line-height 28
    padding 0 8px
    background-color $color-bg-sss
    // 图标
    .bulletin-title
      flex 0 0 22px
      width 22px
      height 12px
      margin-right 8px
      bg-image('images/bulletin')
      background-size 22px 12px
      background-repeat no-repeat
    // 文字
    .bulletin-text
      flex 1
      // 是否换行
      white-space nowrap
      overflow hidden
      // 超出的文字以省略号显示
      text-overflow ellipsis
      font-size $fontsize-mini
    // 箭头
    .icon-keyboard_arrow_right
      flex 00 10px
      width 10px
      font-size $fontsize-mini
      vertical-align center
</style>
